<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>飞机大战部落</title>
	<style>
		* {margin:0;padding:0;}
body {background:#cccccc;height:100%;overflow:hidden;}
#wrap {position:relative;width:512px;height:760px;margin:0 auto;border:1px solid transparent;background:url('img/bg0.jpg') center center;background-size:cover;}
#wrap.bg1 {background:url('img/bg1.jpg');}
#wrap.bg2 {background:url('img/bg2.jpg');}
#wrap.bg3 {background:url('img/bg3.jpg');}
#wrap.bg4 {background:url('img/bg4.jpg') no-repeat;background-size:cover;}
#wrap h1 {color:azure;text-align:center;padding:30px;}
.option {width:200px;height:40px;line-height:40px;font-size:30px;color:steelblue;background:wheat;border-radius:10px;border:1px solid #000;font-weight:bold;margin:70px auto;text-align:center;cursor:pointer;}
.footer {position:absolute;right:0;bottom:0;font-size:20px;color:#fff;}
/* enemy 敌机定位 */.enemy {position:absolute;}
/* 血条 */.blood {position:absolute;left:0;right:0;top:-6px;margin:0 auto;width:70%;height:2px;border-radius:2px;border:1px solid red;}
.blood p {height:100%;background:red;}
/* 小飞机 */.small {width:50px;}
img:not(.boom) {width:100%;height:100%;}
/* 大飞机 */.big {width:60px;}
.big .blood {position:absolute;left:0;right:0;top:-10px;margin:0 auto;height:4px;border-radius:unset;}
.blood p {height:100%;background:red;}
/* 我军 */.plane {position:absolute;}
.plane.small {width:80px;}
.plane.big {width:100px;}
.biu {position:absolute;}
.biu.strong1 {width:16px;height:16px;}
.biu.strong2 {width:20px;height:20px;}
/* 爆炸图片 */img.boom {position:absolute;animation:opa 1s;}
@keyframes opa {0% {opacity:1;}
25% {opacity:0.5;}
50% {opacity:1;}
100% {opacity:0;}
}
/* prize */.prize {position:absolute;width:50px;height:50px;font-size:50px;text-align:center;line-height:50px;border:1px dashed red;color:red;font-weight:bold;animation:prize 1s infinite;}
@keyframes prize {0% {transform:scale(1);}
50% {transform:scale(1.2);}
100% {transform:scale(1);}
}
/* 得分板 */.score {position:absolute;top:0;left:0;width:70px;height:30px;color:#fff;font-size:20px;}
/* 记录得分 */.record {width:60%;height:100px;margin:100px auto;background:#000;padding:10px;border:4px double #fff;color:#fff;}
.record p {height:50px;font-size:40px;font-weight:bold;text-align:center;color:skyblue;}
/* 再来一次 */.btn {position:absolute;bottom:50px;right:0;left:0;margin:auto;width:150px;height:40px;text-align:center;line-height:40px;color:#fff;font-size:20px;font-weight:bold;border-radius:10px;background:#000;cursor:pointer;/* padding-bottom:100px;*/}
.wrap-b {background-color:rgb(255,242,217);width:80px;height:30px;line-height:30px;position:relative;bottom:32px;left:50%;margin-left:-35px;text-align:center;border:1px solid #000;border-radius:10px;font-size:.1em;font-weight:bold;opacity:0.4;overflow: hidden;}
.wrap-b a {text-decoration:none;color:rgb(255,51,0);}

	</style>
</head>

<body onselectstart="return false">
	<div id="wrap" ondragstart="return false">

	</div>
	<div class="wrap-b">
		<a href="index.html">退出游戏</a>
	</div>

	<script>

(function() {


// 判断是pc还是移动端
//定义一个全局变量用于兼容onmousemove 和 touchmove拖拽事件
var move_plane = null;
var move_plane_e = null;
document.body.style.width = document.documentElement.clientWidth + "px";
document.body.style.height = document.documentElement.clientHeight + "px";

function goPAGE() {
	if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
		/*window.location.href="你的手机版地址";*/
		document.getElementById("wrap").style.width = document.documentElement.clientWidth + "px";
		console.log(document.documentElement.clientWidth);
		document.getElementById("wrap").style.height = document.documentElement.clientHeight + "px";
		move_plane = "touchmove";
		console.log("mobile");
	} else {
		/*window.location.href="你的电脑版地址";    */
		document.getElementById("wrap").style.width = "512px";
		move_plane = "mousemove";
		console.log("pc");
	}
}
goPAGE();

	var wrap = document.getElementById("wrap"),
	speedEnemy = [400, 350, 300, 200],
	wrapWidth = wrap.clientWidth,
	wrapHeight = wrap.clientHeight,
	enePlane = document.getElementsByClassName('enemy'),
	plane = document.getElementsByClassName("plane"),
	prize = document.getElementsByClassName('prize'),
	defaultEne = {
		big: {
			width: 260,
			height: 200,
			strong: 5
		},
		small: {
			width: 108,
			height: 80,
			strong: 1
		}
	},
	defaultPlane = {
		big: {
			width: 97,
			height: 97,
			filename: 'plane_1.png'
		},
		small: {
			width: 122,
			height: 95,
			filename: 'plane_0.png'
		}
	};

	init() // 初始化界面
	function init() {
		var optArr = ['简单模式', '一般模式', '困难模式', '地狱模式'];

		wrap.innerHTML = "";

		var h1 = document.createElement('h1'),
		div = document.createElement('div');
		// div.innerHTML = 'Tz-40js';
		div.className = 'footer';
		h1.innerHTML = '飞机大战部落';
		wrap.appendChild(h1);
		wrap.appendChild(div);

		for (var i = 0,
		len = optArr.length; i < len; i++) {
			var div = document.createElement('div');
			div.className = 'option';
			div.innerHTML = optArr[i];
			div.i = i;
			div.onclick = function(e) {
				startGame(this.i, e);
			}
			wrap.appendChild(div);
		}
	}

	// startGame 开始游戏
	function startGame(idx, e) {
		var mod = ['small', 'big', 'small', 'small'];
		wrap.innerHTML = "";
		wrap.className = 'bg' + (idx + 1);

		wrap.eneTime = setInterval(function() {
			enemy(idx, mod[randomArea(0, 3)]);
		},
		speedEnemy[idx]);

		myPlane(e, idx, 'small');

		wrap.prizeTime = setInterval(function() {

			createPrize(['火', '风'][randomArea(0, 1)]);
		}, 5000);

		showScore();

		var audio = document.createElement('audio');
		audio.src = 'img/game_music.mp3';
		audio.autoplay = true;
		audio.loop = true;
		audio.volume = 0.5;

		wrap.appendChild(audio)

	}

	// 创建敌军函数
	function enemy(idx, model) {

		var ene = document.createElement('div'),
		bloodBorder = document.createElement('div'),
		blood = document.createElement('p'),
		img = document.createElement('img');

		ene.className = 'enemy ' + model;

		ene.model = model;

		bloodBorder.className = 'blood';

		img.src = 'img/enemy_' + model + '.png';

		img.width = defaultEne[model].width;
		img.height = defaultEne[model].height;

		ene.style.top = 0;

		ene.strong = defaultEne[model].strong;

		ene.speed = randomArea(2, 4);

		//
		wrap.appendChild(ene).appendChild(bloodBorder).appendChild(blood);
		ene.appendChild(img);

		ene.style.left = randomArea(0, wrapWidth - ene.clientWidth) + "px";

		eneLanding(); // 敌机生成结束 开始下降

		function eneLanding() {
			ene.style.top = ene.offsetTop + ene.speed + "px";
			if (ene.offsetTop >= wrapHeight - ene.offsetHeight) {

				wrap.removeChild(ene);
			} else {

				if (plane[0] && isDuang(plane[0], ene)) {

					boom(ene);

					overgg();

				} else {
					plane[0] && requestAnimationFrame(eneLanding);
				}

			}
		}

	}

	// 创建我军函数
	function myPlane(e, idx, model) {

		var maxTop, maxLeft, minLeft;
		var plane = document.createElement('div'),
		img = document.createElement('img');

		img.src = 'img/' + defaultPlane[model].filename;
		img.width = defaultPlane[model].width;
		img.height = defaultPlane[model].height;

		plane.className = "plane " + model;

		plane.strong = 0;

		plane.count = 0;

		plane.model = model;

		wrap.appendChild(plane).appendChild(img);

		img.onload = function() {
			plane.style.top = e.pageY - wrap.offsetTop - plane.clientHeight / 2 + 'px';
			plane.style.left = e.pageX - wrap.offsetLeft - plane.clientWidth / 2 + 'px';

			maxTop = wrap.clientHeight - plane.offsetHeight,
			minLeft = -plane.offsetWidth / 2,
			maxLeft = wrap.clientWidth + minLeft;
		}

		document.addEventListener(move_plane, function(e) {
			// 判断pc移动端
			if (move_plane === "touchmove") {
				move_plane_e = e.touches[0];
				// console.log("1");
				// console.log(move_plane_e);
			} else if (move_plane === "mousemove"){
				move_plane_e = e;
				// console.log("2");
				// console.log("2222" + move_plane_e);
			}
			var top = move_plane_e.pageY - wrap.offsetTop - plane.offsetHeight / 2,
			left = move_plane_e.pageX - wrap.offsetLeft - plane.offsetWidth / 2;

			top = Math.max(0, top);
			top = Math.min(maxTop, top);
			left = Math.max(minLeft, left);
			left = Math.min(maxLeft, left);

			plane.style.top = top + 'px';
			plane.style.left = left + 'px';

			for (var i = 0,	len = prize.length; i < len; i++) {
				if (isDuang(plane, prize[i])) {
					if (prize[i].attr === '火') {
						plane.strong++;
					} else if (prize[i].attr === '风') {
						plane.count++;
						if (plane.count > 2) {
							// alert('gameover！');
							overgg();
						}
					}

					clearTimeout(prize[i].time);
					wrap.removeChild(prize[i])
				}
			}
		});

		// 生成子弹
		var speed = [300, 250, 200, 150][idx],
		biuSpd = [4, 5, 6, 7][idx];

		var audio = document.createElement('audio');
		audio.loop = true;
		audio.autoplay = true;
		wrap.appendChild(audio);

		plane.time = setInterval(function() {

			for (var i = 0; i <= plane.count; i++) {
				Biu({
					strong: plane.strong,
					count: plane.count,
					i: i
				})

				audio.src = plane.count > 0 ? 'img/enemy2_out.mp3': 'img/bullet.mp3';

			}

		}, speed)

		function Biu(obj) {
			var biu = document.createElement('img');
			biu.src = 'img/fire.png';
			biu.className = 'biu strong1';
			biu.strong = 1 + plane.strong;
			biu.count = 1 + plane.count;

			wrap.appendChild(biu);
			biu.style.top = plane.offsetTop + 'px';

			if (obj.count === 0) {

				biu.style.left = plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2 + "px";
			} else if (obj.count === 1) {

				biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px';
			} else if (obj.count === 2) {

				biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px';
			}
			runBiu();

			function runBiu() {
				biu.style.top = biu.offsetTop - biuSpd + "px";
				if (biu.offsetTop <= 0) {
					wrap.removeChild(biu);
				} else {

					plane.parentNode && (biu.time = requestAnimationFrame(runBiu));

					for (var i = 0,
					len = enePlane.length; i < len; i++) {

						if (enePlane[i] && isDuang(biu, enePlane[i])) {

							cancelAnimationFrame(biu.time);

							wrap.removeChild(biu);
							enePlane[i].strong -= biu.strong;

							enePlane[i].children[0].children[0].style.width = enePlane[i].strong / defaultEne[enePlane[i].model].strong * enePlane[i].children[0].clientWidth + "px";

							if (enePlane[i].strong <= 0) {
								if (enePlane[i].model === 'small') {
									wrap.score++;
								} else if (enePlane[i].model === 'big') {
									wrap.score += 4;

								}
								boom(enePlane[i]);

								document.getElementsByClassName('score')[0].innerHTML = wrap.score;
							}

						}
					}

				}
			}

		}
	}

	function boom(obj) {
		var img = document.createElement('img');
		img.src = 'img/boom_' + obj.model + '.png';
		img.width = obj.clientWidth;
		img.height = obj.clientHeight;
		img.className = 'boom';
		img.style.top = obj.offsetTop + "px";
		img.style.left = obj.offsetLeft + "px";

		wrap.removeChild(obj);

		wrap.appendChild(img);

		img.addEventListener('webkitAnimationEnd',
		function() {
			wrap.removeChild(this);
		})

		var audio = document.createElement('audio');
		audio.loop = false;
		audio.autoplay = true;
		audio.src = obj.className === 'enemy' ? 'img/enemy3_down.mp3': 'img/game_over.mp3';
		audio.volume = 0.5;

		audio.addEventListener('ended',
		function() {
			wrap.removeChild(this);
		});

		wrap.appendChild(audio);
	}

	function isDuang(obj1, obj2) { // true 碰撞  false 不碰撞
		var top1 = obj1.offsetTop,
		left1 = obj1.offsetLeft,
		right1 = left1 + obj1.offsetWidth,
		bottom1 = top1 + obj1.offsetHeight,

		top2 = obj2.offsetTop,
		left2 = obj2.offsetLeft,
		right2 = left2 + obj2.offsetWidth,
		bottom2 = top2 + obj2.offsetHeight;

		return ! (top1 > bottom2 || left1 > right2 || bottom1 < top2 || right1 < left2);
	}

	function randomArea(a, b) {
		return Math.floor(Math.random() * (b + 1 - a) + a);
	}

	// GG 游戏结束
	function overgg() {
		// 注销document的move事件
		document.onmousemove = null;
		// 关闭生产敌军的定时器
		clearInterval(wrap.eneTime);
		// 关闭生成子弹的定时器
		clearInterval(plane[0].time);
		// 清除生成奖品的定时器
		clearInterval(wrap.prizeTime);
		// 我军的爆炸效果 && 删除我军
		boom(plane[0]);
		// 统计得分情况
		setTimeout(ggView, 1000);
	}
	//  火 = 增加威力   风 = 增加子弹的条数
	function createPrize(inner) {
		var div = document.createElement('div');
		div.innerHTML = inner;
		div.className = 'prize';

		div.attr = inner;

		div.style.top = randomArea(0, wrapHeight - 50) + 'px';
		div.style.left = randomArea(0, wrapWidth - 50) + 'px';

		wrap.appendChild(div);
		div.time = setTimeout(function() {
			wrap.removeChild(div);
		}, 5000)
	}

	function ggView() {
		// 清屏
		wrap.innerHTML = "";
		// 创建游戏结束画面的两个对象
		var div = document.createElement('div'),
		div2 = document.createElement('div');

		div.className = 'record';
		div.innerHTML = "最终得分：<p>" + wrap.score + "</p>";
		div2.className = "btn";
		div2.innerHTML = '继续游戏';
		div2.onclick = function() {
			// startGame();
			init();
		}
		wrap.appendChild(div);
		wrap.appendChild(div2);

	}

	// showScore  初始化开始几分
	function showScore() {

		var span = document.createElement('span');
		span.innerHTML = wrap.score = 0;
		span.className = 'score';
		wrap.appendChild(span);

	}

})()
	</script>

</body>

</html>